<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyUI/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyUI/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyUI/css/demo.css">
	<script src="<%=basePath%>/js/jquery-1.8.3.js"></script>
	<!--jquery.easyui.min.js包含了easyUI中的所有插件-->
	<script src="<%=basePath%>/js/jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function(){
		/* 现实所有用户信息 */
		$('#dg').datagrid({   
		    url:'<%=basePath%>showusers.do', 
		    
		    idField: 'id',			 //只要创建数据表格 就必须要加 ifField
		   // fitColumns: true,				//宽度自适应
			striped: true ,					//隔行变色特性
			//rownumbers:true,				//显示行号
			//singleSelect:true ,				//单选模式 
			loadMsg: '数据正在加载,请耐心的等待...' ,
			frozenColumns:[[				//冻结列特性 ,不要与fitColumns 特性一起使用 
				{							//如果需要多选，需要禁止单选模式 
					field:'ck' ,
					width:50 ,
					checkbox: true
				}
			]],    
		   
		    columns:[[ 
		    	{field:'id',  width:80, title: '编号',align:'center'}
		        ,{field:'username', width:80, title: '用户名',align:'center'}
		        ,{field:'roletype', width:80, title: '角色',align:'center',
		        	formatter:function(value , record , index){
						if(value == 1){
							return '<span style=color:green; >管理员</span>' ;
						} else{
							return '<span style=color:green; >会员</span>' ; 
						}
					}	  
		        }
		        ,{field:'viptype', width:100, title: '会员类型',align:'center'}
		        ,{field:'recommender', title: '推荐人用户名', width: 120,align:'center'}
		        ,{field:'state', width:80, title: '状态',align:'center',
		        	formatter:function(value , record , index){
						if(value == 1){
							return '<span style=color:green; >启用</span>' ;
						} else{
							return '<span style=color:red; >禁用</span>' ; 
						}
					}		
		        }    
		    ]], 
		    
		    pagination:true,  //显示分页插件
		    pageSize:5, //设置页大小
		    pageList:[5,10,15], //设置每页大小 
		}); 
		
		
		/* 删除用户 */
		 $("#delbtn").click(function(){
			 //获取选中行的对象；实体
			 var arr =$('#dg').datagrid('getSelections'); 
			 if(arr.length <=0){
				 $.messager.alert("系统提示", "至少选择一行记录进行删除!");
			 }else{
				 $.messager.confirm('提示信息','确认删除',function(result){
					 	if(result){
					 		var ids='';
					 		for(var i=0;i<arr.length;i++){
					 			ids=ids+arr[i].id+',';
					 		}
					 	ids=ids.substring(0 , ids.length-1);
					 		//alert(ids);
					 	//异步实现删除
					 	$.post("<%=basePath%>delMoreUsers.do",{"ids":ids},function(data){
					 		//1 刷新数据表格 
							$('#dg').datagrid('reload');
							//2 清空idField   
							$('#dg').datagrid('clearSelections');   //unselectAll取消选中当前页所有的行。
					 		if(data!=null){
					 			$.messager.alert("系统!","数据删除成功!");
					 		}else{
					 			$.messager.alert("系统!","数据删除失败!");
					 		}
					 	},"json");	 		
					 	}else{
					 		return;
					 	}
				 });	 
			 } 
		 });
		
		/* 修改用户 */		
			$("#editbtn").click(function(){
				//获取选中行的对象；实体
				 var arr =$('#dg').datagrid('getSelections'); 
				if(arr.length!=1){
					$.messager.alert("提示信息!","只能选择一行记录进行修改!")
				}else{
					
					var id=arr[0].id;
					$.post("<%=basePath%>selectUsersByPrimaryKey.do",{"id":id},function(data){
						if(data!=null){
							$('#mydialog').dialog('open'); //打开窗口
							$('#myform').get(0).reset();   //清空表单数据 
							$('#myform').form('load',{	   //调用load方法把所选中的数据load到表单中,非常方便
								id:data.id,
								roletype:data.roletype,
								viptype:data.viptype,
								username:data.username,
								realname:data.realname,
								email:data.email,
								tel:data.tel,
								postcode:data.postcode,
								idcard:data.idcard,
								address:data.address
							});
						}
					},"json");
				}	
			});	
				
				
				
			/* 搜素用户 */	
			
			$("#searchbtn").click(function(){
				var username=$("#getUsername").val();
				/* ======================= */
				/* 现实所有用户信息 */ 
		$('#dg').datagrid({   
		    url:"<%=basePath%>getUsersByCondition.do?username="+username, 
		     
		    idField: 'id',			 //只要创建数据表格 就必须要加 ifField
		   // fitColumns: true,				//宽度自适应
			striped: true ,					//隔行变色特性
			//rownumbers:true,				//显示行号
			//singleSelect:true ,				//单选模式 
			loadMsg: '数据正在加载,请耐心的等待...' ,
			frozenColumns:[[				//冻结列特性 ,不要与fitColumns 特性一起使用 
				{							//如果需要多选，需要禁止单选模式 
					field:'ck' ,
					width:50 ,
					checkbox: true
				}
			]],    
		   
		    columns:[[ 
		    	{field:'id',  width:80, title: '编号',align:'center'}
		        ,{field:'username', width:80, title: '用户名',align:'center'}
		        ,{field:'roletype', width:80, title: '角色',align:'center',
		        	formatter:function(value , record , index){
						if(value == 1){
							return '<span style=color:green; >管理员</span>' ;
						} else{
							return '<span style=color:green; >会员</span>' ; 
						}
					}	  
		        }
		        ,{field:'viptype', width:100, title: '会员类型',align:'center'}
		        ,{field:'recommender', title: '推荐人用户名', width: 120,align:'center'}
		        ,{field:'state', width:80, title: '状态',align:'center',
		        	formatter:function(value , record , index){
						if(value == 1){
							return '<span style=color:green; >启用</span>' ;
						} else{
							return '<span style=color:red; >禁用</span>' ; 
						}
					}		
		        }  
		    ]], 
		    
		    pagination:true,  //显示分页插件
		    pageSize:5, //设置页大小
		    pageList:[5,10,15], //设置每页大小 
		}); 
			});
			
		
		
		
		
	});

</script>
<title>Insert title here</title>
</head>
<body class="layui-layout-body">

 <a id="delbtn"  class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a> 
 <a id="editbtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a> 
 <input type="text" id="getUsername" placeholder="请输入用户名"><a id="searchbtn" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a> 
 <br> <br> 
			<table id="dg"></table> 
			
				<!-- 修改用户信息 -->
		<div id="mydialog" title="修改" modal=true  draggable=true class="easyui-dialog" closed=true style="width:1000px ">  			
		  <form id="myform" enctype="multipart/form-data" method="post" action="<%=basePath%>updateUsersByPrimaryKeySelective.do">
		  	<br>
		  		<div style="margin-left: 35px">
		  		<input name="id" type="text" >
		  		用户角色:
		  			<select  class="easyui-combobox" name="roletype" style="width:200px;" >  
					    <option >---请选择---</option>  
					    <option value="2">会员</option>  
					    <option value="1">管理员</option>  
					</select>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  		会员类型:
		  				<select  class="easyui-combobox" name="viptype" style="width:200px;">  
					    <option>---请选择---</option>  
					    <option value="注册会员">注册会员</option>  
					    <option value="消费会员">消费会员</option>  
					    <option value="VIP会员">VIP会员</option>  
					    <option value="加盟店">加盟店</option>  
						</select> 
				</div> 
						<br>
				<div style="margin-left: 35px">		
		  		用户名:<input class="easyui-validatebox" name="username"  data-options="required:true" /> 
		  		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  		姓名:<input  class="easyui-validatebox" name="realname" data-options="required:true" />  
		  		 		<br><br>
		  		</div>
		  		
		  		<div style="margin-left: 35px">	 
		  		联系电话:<input type="text" class="easyui-numberbox" name="tel" data-options="min:0"></input>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  		电子邮件:<input  class="easyui-validatebox" name="email" data-options="required:true,validType:'email'" />  
		  				<br><br>
		  		</div>
		  		
		  		
		  		<div style="margin-left: 35px">
		  		邮政编码:<input type="text" class="easyui-numberbox"  name="postcode" data-options="min:0"></input>
		  		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		  		身份证号:<input type="text" class="easyui-numberbox" name="idcard" data-options="min:0"></input>
		  		<br><br>
		  		</div>
		  		
		  		
		  		<div style="margin-left: 35px">
		  		收货地址: 
		  			<textarea name="address" id="textarea" cols="45" rows="5"></textarea>
		  				<br><br>
		  		</div>
		  		
		  		<!-- idcardpicb -->
		  		<div style="margin-left: 35px">		
		  		身份证照片正面:<input type="file" name="files" />
		  		<br><br>
		  		身份证照片反面:<input type="file" name="files" />
		  		</div>
		  		
		  		<!-- 推荐人用户名默认为当前登录用户
		  		会员状态默刚注册未激活
		  		自动创建一个账户
		  		登录密码默认为123456	
		  		注册时间 -->
		  		
		  		<div style="margin-left: 80px">
		  		<br><br><br>
		  		
				 <input type="submit" id="updatesave"  value="保存">
				<!--<a id="save"  class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>  --> 
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a id="updatereset"  class="easyui-linkbutton" data-options="iconCls:'icon-reload'">重置</a>  
				<!-- <input type="reset" value="重置"> -->
				</div>
		 </form>
		</div> 
			
			
			 
</body>
</html>